<template>
    <div class="Guess">
        <div class="guess-desc" :class="[guessDesc]">
            <div>猜你喜欢</div>
        </div>
        <div class="guess-content" v-for="(guess, index) of allGuess" :key="index" @click="SceDetail(
            guess.guessImgUrl, guess.guessName, guess.guessDesc, guess.guessAddress, guess.guessMark, guess.guessRank, guess.guessData,
            guess.guessRemark, guess.guessLine, guess.guessTitle
        )">
            <div class="guess-content-img">
                <img :src="guess.guessImgUrl" />
            </div>
            <div class="guess-content-desc">
                <div class="desc-left">
                    <p class="desc-left-name">
                        {{guess.guessName}}
                    </p>
                    <p class="desc-left-desc">
                        {{guess.guessDesc}}
                    </p>
                </div>
                <div class="desc-right" v-show="guess.guessPrice">
                    <p>￥</p>{{guess.guessPrice}}<p>起</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "HomeGuess",
        data(){
            return {
                allGuess: [],
                guessDesc: ''
            }
        },
        mounted() {
            this.getAllGuess();
            window.addEventListener('scroll',this.scrollChange)
        },
        methods:{
            SceDetail(guessImgUrl, guessName, guessDesc, guessAddress, guessMark, guessRank, guessData, guessRemark, guessLine, guessTitle){
                let guessDetail = {
                    imgUrl: guessImgUrl,
                    name: guessName,
                    desc: guessDesc,
                    address: guessAddress,
                    mark: guessMark,
                    rank: guessRank,
                    data: guessData,
                    remark: guessMark,
                    line: guessLine,
                    title: guessTitle
                };
                this.$store.dispatch("guessD",guessDetail)
                this.$router.push("/scedetail")
            },
            getAllGuess(){
                this.getRequest("/home/guess/list/").then(resp => {
                    this.allGuess = resp.data;
                })
            },
            scrollChange(){
                let height = document.documentElement.scrollTop

                if (height > 600){
                    this.guessDesc = "guessDesc"
                } else {
                    this.guessDesc = ''
                }
            }
        }
    }
</script>

<style scoped>
.Guess{
    border-top:.2rem solid #eee;
    background:#fff;
}
.guess-desc{
    top: .5rem;
    overflow: hidden;
    height:0;
    padding-bottom:10%;
    text-align:center;
    color:#23beae;
}
.guessDesc{
    position: fixed;
    top: .8rem;
    left: 0;
    background: #ffffff;
    z-index: 150;
    width: 100%;
    transition: all 1s;
}
.guess-desc>div {
    overflow:hidden;
    width:25%;
    height:0;
    padding-bottom:6%;
    margin:0 auto;
    padding-top:.23rem;
    border-bottom:.1rem solid #23beae;
}
.guess-content-img{
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 48.3%;
}
.guess-content-img > img {
    width: 92%;
    padding-left: 4%;
}
.guess-content-desc{
    display: flex;
    justify-content: space-between;
    padding: .2rem .3rem;
}
.desc-left-name{
    font-size: 16px;
    font-weight: bold;
    line-height: .6rem;
}
.desc-left-desc{
    color: #aaaaaa;
}
.desc-right{
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    padding-top: .4rem;
}
.desc-right > p{
    color: red;
    font-weight: bold;
    padding-left: .1rem;
}
</style>